<template>
  <div class="BasicMessage">
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">用户名</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <span>{{user_name}}</span>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">Uid</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">{{UId}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">昵称</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <span v-show="changeBool" >{{NewNickName}}</span>
        <el-input v-show="!changeBool" v-model="NewNickName"></el-input>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">性别</div></el-col>
      <el-col :span="10"><div class="grid-content bg-purple-light">
          <el-radio :disabled="changeBool"  v-model="NewSex" label="MAN">男</el-radio>
          <el-radio :disabled="changeBool"  v-model="NewSex" label="WOMAN">女</el-radio>
          <el-radio :disabled="changeBool"  v-model="NewSex" label="FUTANARI">扶她</el-radio>
          <el-radio :disabled="changeBool"  v-model="NewSex" label="FALSEWOMAN">伪娘</el-radio>
          <el-radio :disabled="changeBool"  v-model="NewSex" label="NOSEX">无性别</el-radio>
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">创建时间</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">{{create_time | dayFix1}}</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">简介</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">
        <el-input 
        class="inpt"
        type="textarea" 
        :rows="4"
        :size="medium"
        v-model="NewAutograph"
        maxlength="30"
        show-word-limit
        :disabled="changeBool"
        ></el-input>
      </div></el-col>
    </el-row>
    <div class="change">
      <el-button @click="Change()" type="success" v-if="changeBool">编辑资料</el-button>
      <el-button @click="Change();quxiao()"  type="danger" v-if="!changeBool">取消</el-button>
      <el-button @click="Change();queding()" type="primary" v-if="!changeBool">确定</el-button>

    </div>
  </div>
</template>

<script>
export default {
    name:"BasicMessage",
    // inject:['busAutograph'],
    data() {
      return {
        changeBool:true,
        beforeNickName:'',
        beforeSex:'',
        beforeAutograph:'',
        NewNickName:'',
        NewSex:'',
        NewAutograph:'',
        user_name:'', //用户名
        UId:'',
        user:'',
        create_time:''
      };
    },
    created(){
        this.$store.dispatch('registerAndLogin/reqLoginJudge').then((result)=>{
            this.user = result.data.data;
            this.user_name = this.user.user_name  //用户名
            this.UId = this.user.user_id             //uid
            this.NewNickName = this.user.user_nick_name   //让新旧昵称先相等
            this.beforeNickName = this.user.user_nick_name
            this.NewSex = this.user.sex
            this.beforeSex = this.user.sex
            this.create_time = this.user.create_time
            this.beforeAutograph = this.user.signature
            this.NewAutograph = this.user.signature
        })
    },
    mounted(){
    },
    methods: {
      Change() {
        this.changeBool = !this.changeBool
      },
      quxiao(){
        this.NewNickName = this.beforeNickName
        this.NewSex = this.beforeSex
        this.NewAutograph = this.beforeAutograph
      },
      queding(){
        this.beforeNickName = this.NewNickName
        this.beforeSex = this.NewSex
        this.beforeAutograph = this.NewAutograph
        //发送修改请求
        let obj = {
          user_nick_name: this.NewNickName,
          signature:this.NewAutograph,
          sex:this.NewSex,
        }
        this.$store.dispatch('personalCenter/reqChangePersonalMessage', obj).then((result)=>{
          if(result.data.status == '200'){
            this.$message({
              message:result.data.message,
              type: "success",
            });
          }else{
            this.$message({
              message:result.data.message,
              type: "error",
            });
          }
          let time = setTimeout(()=>{
            location.reload();
            clearTimeout(time)
          },2000)
        });
      }
    },
    watch: {
      autograph(newValue, oldValue) {
        console.log(newValue,oldValue);
      },
    },
}
</script>

<style lang="less">
  .BasicMessage{
    padding: 80px;
    .el-row{
      height: 60px;
      .el-col{
        &:first-child{
          color:#606266;
          font-size: 18px;
        }
        div{
          font-family: 'FZZYJT';
        }
        span{
          font-family: 'FZZYJT';
          color: black;
        }
      }
      .inpt{
        textarea{
          resize: none;
        }
        span{
          user-select: none;
        }
      }
    }
    .change{
      position: absolute;
      top: 80px;
      right: 150px;
      span{
        font-family: 'FZZYJT';
      }
    }
  }
</style>